<template>
<div class="pagelist">
    <template v-if="currPage==1">
        <span>首页</span>
        <span>上一页</span>
    </template>
    <template v-else>
        <a href="#" @click.prevent="url(1)">首页</a>
        <a href="#" @click.prevent="url(currPage-1)">上一页</a>
    </template>
    <i v-show="currPage>step">...</i>
    <a 
    :class="{curr:currPage == i}" 
    v-for="(i,index) in pages" 
    :key="index"
    href="#" 
    @click.prevent="url(i)"
    >{{ i }}</a>
    <i v-show="currPage<pages-step">...</i>
    <template v-if="currPage>=pages">
        <span>下一页</span>
        <span>尾页</span>
    </template>
    <template v-else>
        <a href="#" @click.prevent="url(currPage+1)">下一页</a>
        <a href="#" @click.prevent="url(currPage)">尾页</a>
    </template>
</div>
</template>
<script>
export default {
    name:'Pagination',
    props: ["currPage", "pageSize", "total", "step"],
    data(){
        return {}
    },
    methods:{
        url(num){
            if( num == 0 ){
                num = 1
            }
            if( num > this.pages ){
                num = this.pages
            }
            this.$emit('changeCurrPage',num);
        },
    
    },
    computed:{
        pages:function(){
            return Math.ceil(this.total/this.pageSize);
        }
    },
    mounted(){
        console.log(this.total,this.pageSize,this.pages);
    }
}
</script>
<style>
/*分页*/
.pagelist{line-height:14px;margin-top:20px;overflow:hidden;padding-bottom:2px;}
.pagelist a{display:inline-block;margin:0 3px;padding:2px 12px;border:1px solid #ccc;text-decoration:none;color:#808080;font-size:12px;height:24px;line-height:24px;background:#fff;}
.pagelist a:hover{color:#0088B3;border:1px solid #0088B3;}
.pagelist a.curr{border:none;background:#0088B3;border:1px solid #0088B3;color:#fff;}
.pagelist i{display:inline-block;margin:0 5px;color:#808080;font-style:normal;}
.pagelist span{display:inline-block;padding:2px 12px;font-size:12px;height:24px;line-height:24px;color:#bbb;border:1px solid #ccc;background:#fcfcfc;margin:0 3px;}
</style>